<!-- 商城首页 -->
<template>
	<view class="container">
		<view>
			<view class="header" :style="{backgroundImage:'url(' + theme.background +')'}">
				<uni-nav-bar statusBar="true" @clickLeft="back" title="线上商城" color="#fff" leftIcon="back" background="inherit">
				</uni-nav-bar>
				<view class="searchBox">
					<view class="uni-searchbox">
						<view class="uni-search-input" @tap="search()">
							<icon type="search" :size='13' color='#999'></icon>
							<input confirm-type="search" placeholder="大家都在搜" placeholder-class="uni-input-plholder" class="uni-input"
							 disabled>
						</view>
					</view>
					<view class="logoBox" @tap="back">
						<image class="logoBox-image" lazy-load src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-06/904732020062321320446.png"
						 mode=""></image>
						<view class="title">
							<text class="logoBox-title-text">国家普惠社区</text>
							<text class="logoBox-title-text">GUOJIAPUHUISHEQU</text>
						</view>
					</view>
				</view>
				<image class="label" :src="theme.text" mode=""></image>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="content" :style="{paddingTop:MenuButtonTop + 129 + 'px'}">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="content">
					<!-- #endif -->
					<view class="circle" :style="{backgroundImage:'url(' + theme.background +')'}"></view>
					<view class="contentBox">
						<!-- 轮播 -->
						<view class="carousel-section">
							<swiper class="carousel" circular autoplay :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
							 indicator-active-color="#ffffff">
								<swiper-item v-for="(item, index) in data.banner" :key="index" class="carousel-item" @click="navTo(item.url)">
									<view class="carousel-image">
										<easy-loadimage mode="aspectFill" :scroll-top="scrollTop" :image-src="item.pic"></easy-loadimage>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<!-- 分类一行滑动 -->
						<view class="cate-section-1" v-if="theme.cateType == 1">
							<image class="icon1" :src="theme.icon1" mode="widthFix"></image>
							<image class="icon2" :src="theme.icon2" mode="widthFix"></image>
							<scroll-view @scroll="bindscroll" class="scrollX" scroll-x="true">
								<view class="cateBox">
									<block v-for="(item,index) in data.menus" :key="index">
										<view class="cate-item" @tap="navTo(item.url)">
											<view class="cate-item-image">
												<easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="item.pic"></easy-loadimage>
											</view>
											<text class="cate-item-text">{{item.name}}</text>
										</view>
									</block>
								</view>
							</scroll-view>
							<view class="litScroll">
								<view class="lit" :style="{left:scrollLeft + 'rpx'}"></view>
							</view>
						</view>
						<!-- 分类两行不滑动 -->
						<view class="cate-section-2" :style="{height:cate2Height + 'px'}" v-if="theme.cateType == 2">
							<image class="icon1" :src="theme.icon1" mode="widthFix"></image>
							<image class="icon2" :src="theme.icon2" mode="widthFix"></image>
							<block v-for="(item,index) in data.menus" :key="index">
								<view class="cate-item" @tap="navTo(item.url)">
									<view class="cate-item-image">
										<easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="item.pic"></easy-loadimage>
									</view>
									<text class="cate-item-text">{{item.name}}</text>
								</view>
							</block>
						</view>
						<!-- 活动 -->
						<view class="activity">
							<image class="icon3" :src="theme.icon3" mode="aspectFit"></image>
							<image class="title" src="../static/images/1123.png"></image>
							<view class="itemBox">
								<block v-for="(item,index) in data.benefit" :key="index" v-if="index < 4">
									<view class="guess-item" @click="navToDetailPage(item)" :style="{background: guss[index]}">
										<text class="stitle">{{item.straight_down}}</text>
										<text class="simple" :style="{color: simple[index]}">{{item.label_desc}}</text>
										<view class="image-wrapper">
											<view class="image-wrapper-image">
												<easy-loadimage mode="aspectFill" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
						<!-- 普惠有好物 -->
						<view class="goodGoods">
							<view class="list">
								<view class="title">
									<image lazy-load class="goodsImg" src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/8924a202007060044263746.png"
									 mode=""></image>
								</view>
								<scroll-view class="scroll__view" scroll-x="true">
									<view class="itemList">
										<view class="item" @tap="navTo(item.url)" v-for="(item,index) in data.likeInfoBanner" :key="index">
											<view class="goodsImg">
												<easy-loadimage mode="aspectFill" :scroll-top="scrollTop" :image-src="item.pic"></easy-loadimage>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<!-- 广告 -->
						<view class="advertising">
							<easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="gifImg"></easy-loadimage>
						</view>

					</view>
				</view>
				<!-- 分类商品 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="storeCate" :style="{background: cateBg,top:MenuButtonTop + 127 + 'px'}">
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="storeCate" id="id" :style="{background: cateBg}">
						<!-- #endif -->
						<scroll-view class="scroll__view" scroll-x="true">
							<view class="list">
								<block v-for="(item,index) in fastList" :key="index">
									<view class="item" @click="clickCate(item.id,index)">
										<text :class="active === index?'active':''" class="item-text">{{item.cate_name}}</text>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					<view class="goodslist">
						<view class="goodslistBox">
							<goods-block :goodsList="goodsList" :scrollTop="scrollTop"></goods-block>
						</view>
						<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
					</view>
				</view>
			</view>
</template>

<script>
	import {
		indexApi,
		getProducts
	} from '@/api/mall.js'
	import uniLoadMore from "../../components/uni-load-more/uni-load-more.vue"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import goodsBlock from "@/components/goodsBlock/goodsBlock.vue"
	import {
		systemConfig
	} from '@/api/public.js'
	export default {
		name: "index",
		components: {
			uniNavBar,
			uniLoadMore,
			goodsBlock
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				//#ifdef MP-WEIXIN
				MenuButtonTop: getApp().globalData.MenuButtonTop,
				//#endif
				theme: {
					background: '',
					text: '',
					icon1: '',
					icon2: '',
					icon3: '',
					cateType: '1',
				},
				goodsList: [],
				data: {},
				gifImg: '',
				fastList: [],
				active: 0,
				guss: [
					'linear-gradient(180deg,rgba(233,249,239,1) 0%,rgba(255,255,255,1) 43%)',
					'linear-gradient(180deg,rgba(240,245,251,1) 0%,rgba(255,255,255,1) 43%)',
					'linear-gradient(180deg,rgba(243,226,252,1) 0%,rgba(255,255,255,1) 43%)',
					'linear-gradient(180deg,rgba(239,242,251,1) 0%,rgba(255,255,255,1) 43%)',
				],
				simple: [
					"#684AAE",
					"#F57657",
					"#FF780B",
					"#55ADF3",
				],
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				page: 1,
				limit: 10,
				personal_shell_ration: 1,
				scrollLeft: 0,
				cateBg: 'inherit',
				gifImgHeight: 0,
				cate2Height: 0,
				statusBarHeight: 0
			};
		},
		created() {
			systemConfig({
				filed: 'personal_shell_ration'
			}).then(res => {
				this.personal_shell_ration = Number(res.msg) / 100;
			})
			const {
				windowWidth,
				windowHeight,
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.statusBarHeight = statusBarHeight
			this.gifImgHeight = (windowWidth - 20) * 236 / 714
			this.cate2Height = windowWidth * 340 / 750
			this.loadData()

		},
		watch: {
			scrollTop: {
				deep: true,
				handler(val, oldval) {
					this.scrollTopChange();
				}
			}
		},
		methods: {
			scrollTopChange() {
				if (this.theme.cateType == 1) {
					// #ifdef MP-WEIXIN
					if (this.scrollTop >= 544 + this.gifImgHeight  + this.MenuButtonTop) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
					// #ifdef APP-PLUS
					if (this.scrollTop >= 525 + this.gifImgHeight  + this.statusBarHeight) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
					// #ifdef H5
					if (this.scrollTop >= 570 + this.gifImgHeight  + this.statusBarHeight) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
				} else if (this.theme.cateType == 2) {
					// #ifdef MP-WEIXIN
					if (this.scrollTop >= 459 + this.gifImgHeight + this.cate2Height + this.MenuButtonTop) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
					// #ifdef APP-PLUS
					if (this.scrollTop >= 440 + this.gifImgHeight + this.cate2Height + this.statusBarHeight) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
					// #ifdef H5
					if (this.scrollTop >= 485 + this.gifImgHeight + this.cate2Height) {
						this.cateBg = "#ffffff"
					} else {
						this.cateBg = "inherit"
					}
					//#endif
				}
			},
			async loadData() {
				indexApi().then(res => {
					this.data = res.data;
					console.log(this.data,55555551)
					this.fastList = res.data.info.fastList
					if (this.fastList.length) {
						this.sid = res.data.info.fastList[0].id
					}
					res.data.themeBackgroundData.forEach((item,index) => {
						if (item.background) {
							this.theme.background = item.background 
						}
						if (item.text) {
							this.theme.text = item.text
						}
						if (item.icon1) {
							this.theme.icon1 = item.icon1
						}
						if (item.icon2) {
							this.theme.icon2 = item.icon2
						}
						if (item.icon3) {
							this.theme.icon3 = item.icon3
						}
					})
					this.theme.cateType = res.data.info.district_type
					this.gifImg = res.data.lovely[0].img
					uni.setStorageSync('categoryBanner',res.data.category_banner)
					this.getProdtct()
				})
			},
			lower() {
				if (this.loadStatus == "more")
					(this.loadStatus = "loading"), this.getProdtct();
			},
			clickCate(id, index) {
				if (this.theme.cateType == 1) {
					uni.pageScrollTo({
						//#ifdef MP-WEIXIN
						scrollTop: 545 + this.gifImgHeight + this.MenuButtonTop,
						// #endif
						//#ifdef APP-PLUS
						scrollTop: 526 + this.gifImgHeight + this.statusBarHeight,
						// #endif
						//#ifdef H5
						scrollTop: 571 + this.gifImgHeight + this.statusBarHeight,
						// #endif
						duration: 300
					});
				} else if (this.theme.cateType == 2) {
					uni.pageScrollTo({
						//#ifdef MP-WEIXIN
						scrollTop: 460 + this.gifImgHeight + this.cate2Height + this.MenuButtonTop,
						// #endif
						//#ifdef APP-PLUS
						scrollTop: 441 + this.gifImgHeight + this.cate2Height + this.statusBarHeight,
						// #endif
						//#ifdef H5
						scrollTop: 486 + this.gifImgHeight + this.cate2Height,
						// #endif
						duration: 300
					});
				}
				
				this.sid = id
				this.active = index;
				this.page = 1;
				this.goodsList = [];
				this.loadStatus = "loading"
				this.getProdtct();
			},
			bindscroll(e) {
				let width = e.detail.scrollWidth;
				let left = e.detail.scrollLeft;
				//获取超出的部分
				var autoWidth = width - uni.getSystemInfoSync().windowWidth;
				var scrollLeft = left / autoWidth; //移动的百分比
				scrollLeft = scrollLeft * 120;
				scrollLeft = scrollLeft * 0.6;
				this.scrollLeft = scrollLeft
			},
			getProdtct() {
				getProducts({
					sid: this.sid,
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.loadStatus = "more"
					let list = res.data.map((val, key) => {
						val.blackS = (Number(val.price) * ((100 - val.rebate_ratio) * this.personal_shell_ration) / 100).toFixed(2);
						return val;
					})
					this.goodsList.push.apply(this.goodsList, list);
					if (list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.goodsList.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			back() {
				uni.navigateBack({

				})
			},
			//详情页
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/mall/product/product?id=${item.id}`
				})
			},
			navTo(url) {
				if (!url) {
					uni.showToast({
						icon: "none",
						title: "小普正在开发中，新功能即将上线"
					})
				} else if (url == "/pages/index/searchDetail?info=") {
					uni.navigateTo({
						url: url + encodeURIComponent(JSON.stringify({
							id: 13,
							longitude: uni.getStorageSync("longitude"),
							latitude: uni.getStorageSync("latitude")
						}))
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			search() {
				uni.navigateTo({
					url: `/pages/index/search?type=1`
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding-bottom: 50px;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));

		.header {
			position: fixed;
			top: 0;
			background-repeat: no-repeat;
			background-size: 100%;
			z-index: 9;
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) + 129px);
			// #endif
			overflow: hidden;

			.searchBox {
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 15px;
				position: relative;
				z-index: 2;

				.logoBox {
					margin-left: 20rpx;
					height: 35px;
					display: flex;
					justify-content: center;
					align-items: center;

					.logoBox-image {
						display: block;
						width: 46rpx;
						height: 48rpx;
					}

					.title {
						margin: 0 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: #fff;

						.logoBox-title-text:nth-of-type(1) {
							font-size: 11px;
							letter-spacing: 1px;
						}

						.logoBox-title-text:nth-of-type(2) {
							letter-spacing: 1.1px;
							margin-top: 3rpx;
							font-size: 5px;
							font-weight: bold;
						}
					}
				}

				.uni-searchbox {
					width: 450rpx;
					height: 35px;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.uni-search-input {
						width: 100%;
						height: 100%;
						border-radius: 35rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						background: #fff;
						display: flex;
						align-items: center;
						flex-wrap: nowrap;

						.uni-input {
							flex: 1;
							color: #333;
							padding: 0 16rpx;
							font-size: 28rpx;
						}

						.uni-input-plholder {
							font-size: 28rpx;
							color: #999999;
						}
					}
				}
			}

			.label {
				position: relative;
				z-index: 2;
				width: 650rpx;
				height: 20px;
				margin: 10px 50rpx 0;
				padding-bottom: 5px;
			}
		}

		.content {
			overflow: hidden;
			// #ifdef APP-PLUS
			padding-top: calc(var(--status-bar-height) + 126px);
			// #endif
			// #ifdef H5
			padding-top: 130px;
			// #endif
			width: 100%;
			position: relative;

			.circle {
				position: absolute;
				left: -125rpx;
				top: 0;
				width: 1000rpx;
				height: 478rpx;
				border-radius: 0 0 50% 50%;
				background-repeat:no-repeat;
				background-position: center bottom;
				background-size: 760rpx;
			}

			.contentBox {}


			.scroll-Y {
				width: 100%;
				height: 100%;
			}

			/* 轮播 */
			.carousel-section {
				padding: 5px 30rpx;

				.carousel {
					width: 100%;
					height: 150px;

					.carousel-item {
						width: 100%;
						height: 100%;
						// padding: 0 28rpx;
						overflow: hidden;
					}

					.carousel-image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
						overflow: hidden;
						background: #fafafa;
					}
				}
			}

			/* 分类 */
			.cate-section-1 {
				position: relative;
				height: 100px;
				padding: 15px 0 0;

				.icon1 {
					position: absolute!important;
					left: 0;
					top: 0;
					width: 47rpx;
				}

				.icon2 {
					position: absolute!important;
					right: 0;
					bottom: -20rpx;
					width: 54rpx;
				}

				.litScroll {
					position: absolute;
					bottom: 40rpx;
					left: 50%;
					margin-left: -60rpx;
					height: 8rpx;
					width: 120rpx;
					border-radius: 4rpx;
					background-color: #CBCBCB;

					.lit {
						position: absolute;
						top: 0;
						width: 60rpx;
						height: 8rpx;
						border-radius: 4rpx;
						background-color: #FB3737;
					}
				}

				.scrollX {
					.cateBox {
						padding: 0 10px;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						height: 100%;

						.cate-item {
							margin-bottom: 15px;
							display: flex;
							flex-direction: column;
							align-items: center;
							font-size: $uni-font-size-sm + 2rpx;
							color: $font-color-dark;
							width: 20%;
							min-width: 20%;

							.cate-item-image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.cate-item-text {
								font-size: 24rpx;
								color: rgba(0, 0, 0, 1);
							}
						}
					}
				}
			}

			.cate-section-2 {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				padding: 15px 0;

				.cate-item {
					width: 25%;
					min-width: 25%;
					margin-bottom: 15px;
					font-size: $uni-font-size-sm + 2rpx;
					color: $font-color-dark;
					display: flex;
					flex-direction: column;
					align-items: center;

					.cate-item-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.cate-item-text {
						font-size: 22rpx;
					}
				}

				.icon1 {
					position: absolute!important;
					left: 0;
					top: 0;
					width: 47rpx;
				}

				.icon2 {
					position: absolute!important;
					right: 0;
					bottom: -20rpx;
					width: 54rpx;
				}
			}

			// 广告
			.advertising {
				padding: 0 10px;

				.gif {
					width: 100%;
				}
			}

			/*  活动  */
			.activity {
				position: relative;

				.icon3 {
					position: absolute;
					left: 27rpx;
					top: 0rpx;
					width: 80rpx;
					height: 62rpx;
					//#ifndef H5
					z-index: -1;
					//#endif
				}

				.title {
					display: block;
					margin: 0 auto;
					width: 245rpx;
					height: 18px;
				}

				.itemBox {
					display: flex;
					flex-wrap: wrap;
					background: url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/00bf3202007052354328509.png) no-repeat;
					background-size: 750rpx 140px;
					width: 750rpx;
					height: 140px;
					margin-top: 5px;
					padding: 15px 35rpx;
					box-sizing: border-box;

					.guess-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;
						width: 160rpx;
						height: 110px;
						border-radius: 20rpx;
						padding: 20rpx;

						&:not(:nth-child(4n)) {
							margin-right: 14rpx;
						}

						.image-wrapper {
							margin-top: 5px;
							width: 55px;
							height: 55px;
							background-color: #fff;

							.image-wrapper-image {
								width: 55px;
								height: 55px;
								background: #eee;
							}
						}

						.stitle {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
							width: 100%;
							text-align: center;
						}

						.simple {
							margin-top: 6rpx;
							font-size: 20rpx;
							font-weight: 500;
							width: 100%;
							text-align: center;
						}
					}
				}
			}

			.goodGoods {
				margin: 10px 20rpx 0;
				width: 710rpx;
				height: 115px;
				background: rgba(255, 255, 255, 1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 7px 15rpx;

				.list {
					display: flex;

					.title {
						width: 135rpx;
						height: 100px;
						margin-right: 12rpx;
						border-radius: 10rpx;
						overflow: hidden;

						.goodsImg {
							width: 135rpx;
							height: 200rpx;
						}
					}

					.scroll__view {
						width: 533rpx;

						.itemList {
							display: flex;
							flex-wrap: nowrap;

							.item {
								min-width: 120rpx;
								width: 120rpx;
								height: 100px;
								margin-right: 16rpx;
								border-radius: 10rpx;
								overflow: hidden;

								.goodsImg {
									width: 60px;
									height: 100px;
								}
							}
						}
					}

				}
			}
		}

		/* 分类列表 */
		.storeCate {
			position: sticky;
			//#ifdef APP-PLUS
			top: calc(var(--status-bar-height) + 129px);
			//#endif
			//#ifdef H5
			top: 129px;
			//#endif
			z-index: 66;
			padding: 10rpx 30rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;

			.scroll__view {
				width: 100%;
			}

			.list {
				display: flex;
				padding: 15rpx 0;

				.item {
					padding: 0 30rpx;
					white-space: nowrap;
					font-size: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 60rpx;

					.item-text {
						min-width: 60rpx;
						text-align: center;
					}

					.active {
						color: $mall-price !important;
						font-weight: bold;
						font-size: 30rpx;
						position: relative;
					}

					.active:after {
						content: '';
						position: absolute;
						height: 37rpx;
						width: 37rpx;
						border-radius: 19rpx;
						border: 6rpx $mall-price solid;
						clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
						box-sizing: border-box;
						margin-left: -19rpx;
						bottom: -20rpx;
						left: 50%;
					}
				}

				.item:nth-of-type(1) {
					padding-left: 0;
				}
			}
		}
	}


	/* 猜你喜欢 */
	.goodslist {
		min-height: 80vh;
	}

	.goodslistBox {
		padding: 20rpx 30rpx 0;
	}
</style>
